<template>
  <div class="app-container">
    <el-steps :space="200" :active="active" simple finish-status="success">
      <el-step :title=title icon="el-icon-edit"></el-step>
      <el-step title="资料上传" icon="el-icon-upload"></el-step>
      <el-step title="企业信息二次确认" icon="el-icon-upload"></el-step>
    </el-steps>
    <br><br>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="招标项目" prop="markId" v-if="active == 2">
        <el-select v-model="form.mark.id" placeholder="请选择招标项目" :disabled="true">
          <el-option v-for="item in markUseList" :label="item.markName" :key="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司编号" prop="firmId" v-if="active == 2">
        <el-input v-model="form.firmId" placeholder="请输入公司编号" :disabled="true" />
      </el-form-item>
      <el-form-item label="公司名 " prop="firmName" v-if="active == 2">
        <el-input v-model="form.firmName" placeholder="请输入公司名 " :disabled="true" />
      </el-form-item>
      <el-form-item label="SPI" prop="firmSip" v-if="active == 2">
        <el-input v-model="form.firmSip" placeholder="请输入统一社会信用代码" :disabled="true" />
      </el-form-item>
      <el-form-item label="注册地址" prop="registerAddress" v-if="active == 2">
        <el-input v-model="form.registerAddress" :disabled="true" />
      </el-form-item>
      <el-form-item label="企业性质" prop="firmNature" v-if="active != 1">
        <el-select v-model="form.firmNature" placeholder="请选择企业性质">
          <el-option label="国有企业" value="0"></el-option>
          <el-option label="集体所有制" value="1"></el-option>
          <el-option label="私营企业" value="2"></el-option>
          <el-option label="股份制企业" value="3"></el-option>
          <el-option label="有限合伙企业" value="4"></el-option>
          <el-option label="联营企业" value="5"></el-option>
          <el-option label="外商投资企业" value="6"></el-option>
          <el-option label="个人独资企业" value="7"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="成立日期" prop="firmCreate" v-if="active == 2">
        <el-date-picker clearable v-model="form.firmCreate" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
          :disabled="true">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="法人" prop="firmBy" v-if="active == 2">
        <el-input v-model="form.firmBy" placeholder="请输入法人/负责人" :disabled="true" />
      </el-form-item>
      <el-form-item label="联系地址" prop="firmAddress" v-if="active == 2">
        <el-input v-model="form.firmAddress" placeholder="请输入单位联系地址" :disabled="true" />
      </el-form-item>
      <el-form-item label="经营范围" prop="businessScopeList" v-if="active != 1">
        <el-cascader ref="cascader1" @visible-change="handleChange" v-model="form.businessScopeList"
          :options="firmTypeList" :props="props" clearable></el-cascader>
      </el-form-item>
      <el-form-item label="营业执照扫描件" prop="businessLicense" v-if="active != 0">
        <ImageUpload :limit=1 :fileSize="10" :ImgUrl="'/wms/firm/BizLicenseOCR'" @input="uploadSuccess"
          :value="form.businessLicense">
        </ImageUpload>
      </el-form-item>
      <el-form-item label="法人身份证扫描件" prop="byIdcardLicense" v-if="active != 0">
        <ImageUpload :limit=1 :fileSize="10" @input="uploadSuccess1" :ImgUrl="'/wms/firm/IDCardOCR'"
          :value="form.byIdcardLicense">
        </ImageUpload>
      </el-form-item>
      <el-form-item label="开户信息" prop="brandUrl" v-if="active != 0">
        <ImageUpload :limit=1 :fileSize="10" @input="uploadSuccess2" :ImgUrl="'/wms/firm/BankCardOCR'"
          :value="form.brandUrl">
        </ImageUpload>
      </el-form-item>
      <el-form-item label="开户行" prop="brandName" v-if="active == 2">
        <el-input v-model="form.brandName" placeholder="请输入开户行" :disabled="true" />
      </el-form-item>
      <el-form-item label="开户账号" prop="brandAccount" v-if="active == 2">
        <el-input v-model="form.brandAccount" placeholder="请输入开户账号" :disabled="true" />
      </el-form-item>
      <el-form-item label="开户地址" prop="brandAddress" v-if="active == 2">
        <el-input v-model="form.brandAddress" placeholder="请输入开户地址" :disabled="true" />
      </el-form-item>
      <el-form-item label="基本户存款信息证" prop="brandInfo" v-if="active != 0">
        <ImageUpload :limit=1 :fileSize="10" @input="uploadSuccess3" :ImgUrl="'/wms/firm/GeneralBasicOCR'"
          :value="form.brandInfo">
        </ImageUpload>
      </el-form-item>
      <el-form-item label="注册资本" prop="registerCapital" v-if="active != 1">
        <el-input-number placeholder="请输入注册资本" size="small" v-model="form.registerCapital" :min="0" :max="99999999"
          :disabled="this.form.id != null"></el-input-number>
      </el-form-item>
      <el-form-item label="实缴资本" prop="capitalNum" v-if="active != 1">
        <el-input-number :disabled="this.form.id != null" placeholder="请输入实缴资本" size="small" v-model="form.capitalNum"
          :min="0" :max="form.capitalNum > form.registerCapital ? form.registerCapital : 99999999">
        </el-input-number>
      </el-form-item>

      <el-form-item label="营业执照有效期" prop="businessEnd" v-if="active == 2">
        <el-date-picker :disabled="true" clearable v-model="form.businessEnd" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择营业执照有效期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="公司简介" v-if="active != 1">
        <editor v-model="form.firmRemark" :min-height="192" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button style="margin-top: 12px;" @click="back" v-if="active != 0 && firmId == null">上一步</el-button>
      <el-button style="margin-top: 12px;" v-if="active == 2" @click="submitForm">提 交</el-button>
      <el-button style="margin-top: 12px;" @click="next" v-if="active != 2 && firmId == null">下一步</el-button>
    </div>


  </div>
</template>

<script>
import { updatMarkStatus, addFirm, getFirm, listMarkUse } from "@/api/wms/firm";
export default {
  name: 'CarbonUiIndex',
  data () {
    return {
      // 可用招标信息
      markUseList: [],
      props: {
        children: 'children',
        label: 'name',
        value: "id",
      },
      firmTypeList: [{
        "id": 1001,
        "name": "IT服务",
        "children": [
          {
            "id": 1001000,
            "name": "计算机软件/硬件/信息服务",

          },
          {
            "id": 1001001,
            "name": "互联网和相关服务",
          },
          {
            "id": 1001002,
            "name": "其他",
          }
        ],
      },
      {
        "id": 1002,
        "name": "制造业",
        "children": [
          {
            "id": 1002000,
            "name": "机械/电子",
          },
          {
            "id": 1003000,
            "name": "服装/纺织",
          },
          {
            "id": 1002002,
            "name": "汽车",
          },
          {
            "id": 1002005,
            "name": "金属制品",
          },
          {
            "id": 1003002,
            "name": "食品/饮料",
          },
          {
            "id": 1003003,
            "name": "家具/家纺",
          },
          {
            "id": 1002001,
            "name": "重工制造",
          },
          {
            "id": 1003005,
            "name": "家电/数码",
          },
          {
            "id": 1002004,
            "name": "橡胶/塑料",
          },
          {
            "id": 1003004,
            "name": "日用品/化妆品",
          },
          {
            "id": 1002006,
            "name": "化学原料制品",
          },
          {
            "id": 1003007,
            "name": "文教/工美/体育/娱乐用品",
          },
          {
            "id": 1003006,
            "name": "烟酒/茶",
          },
          {
            "id": 1002007,
            "name": "非金属矿物",
          },
          {
            "id": 1002003,
            "name": "其他",
          }
        ],
      },
      {
        "id": 1003,
        "name": "批发/零售",
        "children": [
          {
            "id": 1003008,
            "name": "批发",
          },
          {
            "id": 1003010,
            "name": "零售",

          },
          {
            "id": 1003001,
            "name": "超市/便利店/百货商场",

          },
          {
            "id": 1003011,
            "name": "进出口",

          },
          {
            "id": 1003009,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1004,
        "name": "生活服务",
        "children": [
          {
            "id": 1004001,
            "name": "餐饮",

          },
          {
            "id": 1004004,
            "name": "居民服务",

          },
          {
            "id": 1004002,
            "name": "租赁和商务服务",

          },
          {
            "id": 1004000,
            "name": "酒店/住宿",

          },
          {
            "id": 1004003,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1005,
        "name": "文化/体育/娱乐业",
        "children": [
          {
            "id": 1005001,
            "name": "文化/体育",

          },
          {
            "id": 1005002,
            "name": "娱乐/旅游",

          },
          {
            "id": 1005000,
            "name": "新闻传媒",

          },
          {
            "id": 1005003,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1006,
        "name": "建筑/房地产",
        "children": [
          {
            "id": 1006001,
            "name": "建筑业",

          },
          {
            "id": 1006002,
            "name": "建材装修",

          },
          {
            "id": 1006000,
            "name": "房地产",

          },
          {
            "id": 1006003,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1007,
        "name": "教育",
        "children": [
          {
            "id": 1007000,
            "name": "学前教育",
          },
          {
            "id": 1007001,
            "name": "初中等教育",
          },
          {
            "id": 1007002,
            "name": "高等教育",
          },
          {
            "id": 1007003,
            "name": "培训机构",
          },
          {
            "id": 1007004,
            "name": "其他",

          }
        ],
      },
      {
        "id": 1008,
        "name": "运输/物流/仓储",
        "children": [
          {
            "id": 1008003,
            "name": "物流/仓储",

          },
          {
            "id": 1008000,
            "name": "道路/铁路运输",

          },
          {
            "id": 1008004,
            "name": "邮政/快递",

          },
          {
            "id": 1008001,
            "name": "航空运输",

          },
          {
            "id": 1008002,
            "name": "水上运输",

          },
          {
            "id": 1008005,
            "name": "其他",

          }
        ],
      },
      {
        "id": 1009,
        "name": "医疗",
        "children": [
          {
            "id": 1009000,
            "name": "医院/医疗机构",

          },
          {
            "id": 1009003,
            "name": "医疗器械",

          },
          {
            "id": 1009001,
            "name": "医药制造",

          },
          {
            "id": 1009002,
            "name": "医药流通",

          },
          {
            "id": 1009004,
            "name": "其他",

          }
        ],
      },
      {
        "id": 1010,
        "name": "政府",
        "children": [
          {
            "id": 1010000,
            "name": "党政机关",

          },
          {
            "id": 1010001,
            "name": "国家权力/行政机构",

          },
          {
            "id": 1010002,
            "name": "检察院/法院/公安",

          },
          {
            "id": 1010003,
            "name": "民政/人社/交通/卫生",

          },
          {
            "id": 1010004,
            "name": "发改委/经信委/商务局/统计局",

          },
          {
            "id": 1010005,
            "name": "国土/规划",

          },
          {
            "id": 1010006,
            "name": "税务/海关/工商/环保/物价/药品",

          },
          {
            "id": 1010007,
            "name": "政协/民主党派",

          },
          {
            "id": 1010008,
            "name": "地方政府",

          },
          {
            "id": 1010009,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1011,
        "name": "金融",
        "children": [
          {
            "id": 1011000,
            "name": "保险",

          },
          {
            "id": 1011001,
            "name": "银行",

          },
          {
            "id": 1011002,
            "name": "证券/投资/基金",

          },
          {
            "id": 1011003,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1012,
        "name": "能源/采矿",
        "children": [
          {
            "id": 1014003,
            "name": "电力/热力/燃气/水供应业",

          },
          {
            "id": 1012003,
            "name": "石油/天然气",

          },
          {
            "id": 1012002,
            "name": "煤炭",

          },
          {
            "id": 1012001,
            "name": "有色金属",

          },
          {
            "id": 1012000,
            "name": "钢铁",

          },
          {
            "id": 1012004,
            "name": "其他",

          }
        ],

      },
      {
        "id": 1013,
        "name": "农林渔牧",
        "children": [
          {
            "id": 1013000,
            "name": "农林渔牧",

          }
        ],

      },
      {
        "id": 1014,
        "name": "其他行业",
        "children": [
          {
            "id": 1014000,
            "name": "科学研究和技术服务业",

          },
          {
            "id": 1014002,
            "name": "社会组织",

          },
          {
            "id": 1014001,
            "name": "水利和环境管理",

          },
          {
            "id": 1014004,
            "name": "国际组织",

          },
          {
            "id": 1014005,
            "name": "其他",

          }
        ],
      }
      ],
      active: 0,
      // 弹出层标题
      title: "企业基本信息",
      // 是否显示弹出层
      open: true,
      // 表单参数
      form: {},
      markId: null,
      firmId: null,
      // 表单校验
      rules: {
        firmNature: [
          { required: true, message: "企业性质不能为空", trigger: "change" }
        ],
        businessScopeList: [
          { required: true, message: "经营范围", trigger: "change" }
        ],
        businessLicense: [
          { required: true, message: "营业执照扫描件", trigger: "blur" }
        ],
        byIdcardLicense: [
          { required: true, message: "法人身份证扫描件", trigger: "change" }
        ],
        // brandUrl: [
        //   { required: true, message: "开户信息", trigger: "change" }
        // ],
        brandInfo: [
          { required: true, message: "基本户存款信息证", trigger: "change" }
        ],
        registerCapital: [
          { required: true, message: "注册资本", trigger: "blur" }
        ],
        capitalNum: [
          { required: true, message: "实缴资本", trigger: "change" }
        ],
        businessEnd: [
          { required: true, message: "营业执照有效期", trigger: "change" }
        ],
      }

    };
  },

  mounted () {
    this.getListMarkUse()
  },
  created () {
    this.markId = this.$route.query.markId
    this.firmId = this.$route.query.firmId
    if (this.markId == null) {
      this.$router.push({ path: "/user/mark" });
    }
    if (this.firmId != null) {
      console.log('.....');
      getFirm(this.firmId, this.markId).then(res => {
        this.form = res.data
      })
      this.active = 2;
    }

  },
  methods: {
    // 获取可用招标信息
    getListMarkUse () {
      listMarkUse().then(res => {
        this.markUseList = res.data
      })
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$modal.confirm('是否确认公司布标信息无误').then(function () {
            return;
          }).then(() => {
            if (this.form.firmStatus == '0') {
              // 报名成功
              updatMarkStatus(this.form.id, this.form.mark.id, '5')
            }
            this.$modal.msgSuccess("操作成功");
            this.form = {}
            this.markId = null
            this.firmId = null
            this.resetForm("form");
            this.$router.push({ path: "/user/mark", });
          }).catch(() => { });
        }
      });
    },
    handleChange (val) {
      if (!val) {
        let nodesInfo = this.$refs['cascader1'].getCheckedNodes()
        this.form.firmTypeName = nodesInfo[nodesInfo.length - 1].parent.label
        this.form.businessScopeName = nodesInfo[nodesInfo.length - 1].label
      }
    },
    // 开户信息扫描件
    uploadSuccess2 (strs, recognize) {
      console.log(strs);
      console.log(recognize);
      this.form.brandUrl = strs;
      this.form.bankCardOCRVO = recognize;
    },
    // 开户许可扫描件
    uploadSuccess3 (strs, recognize) {
      console.log(strs);
      console.log(recognize);
      this.form.brandInfo = strs;
      this.form.genralBasicOCRVO = recognize;
    },
    // 营业执照扫描件
    uploadSuccess (strs, recognize) {
      console.log(strs);
      console.log(recognize);
      this.form.businessLicense = strs;
      this.form.bizLicenseOCRVO = recognize;
      this.form.firmName = recognize.name;

      this.form.firmSip = recognize.regNum;
      this.form.registerAddress = recognize.address;
      this.form.firmName = recognize.name;

    },
    // 法人身份证扫描件
    uploadSuccess1 (strs, recognize) {
      console.log(strs);
      console.log(recognize);

      this.form.byIdcardLicense = strs;
      this.form.idCardResultVO = recognize;
    },
    // 下一步
    next () {
      if (this.active++ > 1) {
        this.active = 2;
        this.$modal.msgWarning("已经到顶了哦");
      }
      if (this.active == 2) {
        if (this.form.id == null) {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.markId != null) {
                this.form.markId = this.markId
                addFirm(this.form).then(res => {
                  getFirm(res.firmId, this.markId).then(res => {
                    this.form = res.data
                  })
                })
              }
            } else {
              this.$modal.msgError("请按规范填写！！");
            }
          })

        }

      }
    }
    ,
    // 上一步
    back () {
      if (this.active-- <= 0) {
        // this.active = 0;
        this.$modal.msgWarning("已经到底了哦");
      }
    },
  }
}
</script>

<style lang="scss" scoped></style>
